/*
 * 财务列表
 * @Author: ice
 * @Date: 2018-11-02 09:12:52
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-09-02 13:52:23
 */

<template>
    <div class="container finance-list-container">
        <div class="operation-wrapper">
            <!-- <a
                :href="exportLink"
                target="_blank">
                <el-button
                    type="primary"
                    :disabled="!authResult.auth_export"
                    size="small">Excel导出</el-button>
            </a> -->
            <el-button
                :type="!isPlatform ? 'primary' : '' "
                size="small"
                @click="fnUser"
            >用户</el-button>
            <el-button
                :type="isPlatform ? 'primary' : '' "
                size="small"
                @click="fnOwners"
            >企业主</el-button>
        </div>
        <div
            class="content-wrapper"
        >
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small"
                    v-if="isPlatform ? authResult.auth_hire : true "
                >
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="账单类型：">
                            <el-select
                                class="filter-input"
                                v-model="filterData.type"
                                filterable
                                @change="getTableData(1)"
                                placeholder="请选择"
                                v-if="!isPlatform"
                            >
                                <el-option
                                    v-for="item in typeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                            <el-select
                                class="filter-input"
                                v-model="filterData.type"
                                filterable
                                @change="fnGetTabDataList(1)"
                                placeholder="请选择"
                                v-if="isPlatform"
                            >
                                <el-option
                                    v-for="item in typeListPlatForm"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="收支类型：">
                            <el-select
                                class="filter-input"
                                v-model="filterData.money_type"
                                filterable
                                @change="getTableData(1)"
                                placeholder="请选择"
                                v-if="!isPlatform"
                            >
                                <el-option
                                    v-for="item in moneyTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-select
                                class="filter-input"
                                v-model="filterData.money_type"
                                filterable
                                @change="fnGetTabDataList(1)"
                                placeholder="请选择"
                                v-if="isPlatform"
                            >
                                <el-option
                                    v-for="item in moneyTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span:5 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="状态：">
                            <el-select
                                class="filter-input"
                                v-model="filterData.status"
                                filterable
                                @change="getTableData(1)"
                                placeholder="请选择"
                                v-if="!isPlatform"
                            >
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-select
                                class="filter-input"
                                v-model="filterData.status"
                                filterable
                                @change="fnGetTabDataList(1)"
                                placeholder="请选择"
                                v-if="isPlatform"
                            >
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="开始时间：">
                            <el-date-picker
                                class="filter-input"
                                v-model="filterData.start_time"
                                type="datetime"
                                @change="getTableData(1)"
                                placeholder="选择日期时间"
                                v-if="!isPlatform"
                            />
                            <el-date-picker
                                class="filter-input"
                                v-model="filterData.start_time"
                                type="datetime"
                                @change="fnGetTabDataList(1)"
                                placeholder="选择日期时间"
                                v-if="isPlatform"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="结束时间：">
                            <el-date-picker
                                class="filter-input"
                                v-model="filterData.end_time"
                                type="datetime"
                                @change="getTableData(1)"
                                placeholder="选择日期时间"
                                v-if="!isPlatform"
                            />
                            <el-date-picker
                                class="filter-input"
                                v-model="filterData.end_time"
                                type="datetime"
                                @change="fnGetTabDataList(1)"
                                placeholder="选择日期时间"
                                v-if="isPlatform"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }">
                        <el-form-item
                            label="用户搜索:"
                            v-if="!isPlatform"
                        >
                            <el-input
                                class="filter-input"
                                v-model="filterData.keyword_student_id"
                                placeholder="用户ID或手机号"
                                @keyup.native.enter="getTableData(1)"
                                suffix-icon="el-icon-search"
                                size="small"
                                clearable
                            />
                        </el-form-item>
                        <el-form-item
                            label="用户搜索:"
                            v-if="isPlatform"
                        >
                            <el-input
                                class="filter-input"
                                v-model="filterData.keyword_hire_id"
                                placeholder="用户ID或手机号"
                                @keyup.native.enter="getTableData(1)"
                                suffix-icon="el-icon-search"
                                size="small"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 5 }"
                        :sm="{ span: 12 }"
                        v-if="isPlatform"
                    >
                        <el-form-item label="公司名称：">
                            <el-input
                                class="filter-input"
                                v-model="filterData.hire_company_name"
                                placeholder="请输入客户的公司名称"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 4 }"
                        :sm="{ span: 12 }"
                        v-if="!isPlatform"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData(1)">搜索</el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleResetFilter()">重置</el-button>
                    </el-col>
                    <el-col
                        class="search-btn-wrapper"
                        :md="{ span: 4 }"
                        :sm="{ span: 12 }"
                        v-if="isPlatform"
                    >
                        <el-button
                            size="small"
                            type="primary"
                            @click="fnGetTabDataList(1)">搜索</el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleResetFilter()">重置</el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="handleSearchResult()">导出搜索记录</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    ref="table"
                    style="width: 100%;">
                    <el-table-column
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="student_info.student_no"
                        :formatter="emptyFormatter"
                        label="ID"
                        :width="160"
                    >
                        <template slot-scope="scope">
                            <span v-if="!isPlatform">{{ scope.row.student_info.student_no !== undefined ? scope.row.student_info.student_no : '-' }}</span>
                            <span v-if="isPlatform">{{ scope.row.hire_info.hire_no !== undefined ? scope.row.hire_info.hire_no : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="student_info.phone"
                        :width="160"
                        :formatter="emptyFormatter"
                        label="手机号"
                    >
                        <template slot-scope="scope">
                            <span v-if="!isPlatform"> {{ scope.row.student_info.phone }}</span>
                            <span v-if="isPlatform"> {{ scope.row.hire_info.username }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="hire_info.company_name"
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        label="公司名称"
                        v-if="isPlatform"
                        key="company_name"
                    />
                    <el-table-column
                        prop="order_no"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        label="账单编号"
                        width="120"
                        key="order_no"
                    />
                    <el-table-column
                        prop="type"
                        :width="120"
                        show-overflow-tooltip
                        :formatter="typeFormatter"
                        v-if="!isPlatform"
                        label="账单类型"
                        key="order_type"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.type==1">
                                用户提现
                            </div>
                            <div v-else-if="scope.row.type==2">
                                用户充值
                            </div>
                            <div v-else-if="scope.row.type==3">
                                系统赠送
                            </div>
                            <div v-else-if="scope.row.type==4">
                                系统扣除
                            </div>
                            <div v-else-if="scope.row.type==5">
                                学生分佣
                            </div>
                            <div v-else-if="scope.row.type==6">
                                邀请好友奖励
                            </div>
                            <div v-else-if="scope.row.type==101">
                                购物返利
                            </div>
                            <div v-else-if="scope.row.type==201">
                                任务奖励
                            </div>
                            <div v-else-if="scope.row.type==202">
                                远程任务奖励
                            </div>
                            <div v-else-if="scope.row.type==301">
                                班费分成
                            </div>
                            <div v-else-if="scope.row.type==401">
                                管培生分佣
                            </div>
                            <div v-else-if="scope.row.type==501">
                                会员卡邀请奖励
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        :width="110"
                        v-if="isPlatform"
                        label="账单类型"
                        key="order_type2"
                    >
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">商品购买</span>
                            <span v-if="scope.row.type == 2">提现</span>
                            <span v-if="scope.row.type == 3">分佣</span>
                            <span v-if="scope.row.type == 4">保证金</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        prop="title"
                        label="标题"
                    />
                    <el-table-column
                        prop="money_type"
                        :width="110"
                        :formatter="moneyTypeFormatter"
                        label="收入/支出" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="money"
                        :width="110"
                        label="金额" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        show-overflow-tooltip
                        prop="commission"
                        v-if="isPlatform"
                        :width='110'
                        label="手续费" />
                    <el-table-column
                        prop="status"
                        :width="100"
                        label="状态">
                        <template slot-scope="scope">
                            <div class="task-review-status">
                                <template v-if="scope.row.status == 2">
                                    <span class="status deny">终止</span>
                                </template>
                                <template v-if="scope.row.status == 0">
                                    <span class="status wait-submit">未开始</span>
                                </template>
                                <template v-if="scope.row.status == 1">
                                    <span class="status wait-audit">进行中</span>
                                </template>
                                <template v-if="scope.row.status == 3">
                                    <span class="status completed">已完成</span>
                                </template>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="complete_remark"
                        show-overflow-tooltip
                        :width="110"
                        label="完成备注" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="remark"
                        :width="150"
                        show-overflow-tooltip
                        label="账单备注" />
                    <el-table-column
                        prop="submit_time"
                        :width="140"
                        show-overflow-tooltip
                        label="创建时间">
                        <template slot-scope="scope">
                            <template v-if="scope.row.create_time">{{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="156">
                        <template slot-scope="scope">
                            <div
                                v-if="!isPlatform"
                                style="display: flex"
                            >
                                <el-button
                                    :disabled="!authResult.auth_operate || scope.row.status != 1"
                                    type="text"
                                    @click="fnAutoComplete(scope.row.order_no)">自动打款</el-button>
                                <el-button
                                    type="text"
                                    :disabled="scope.row.status !=1"
                                    @click="fnShowDialog('dialogOrderNo', scope.row.order_no)">完成</el-button>
                                <el-button
                                    :disabled="scope.row.status !=1"
                                    type="text"
                                    class="btn-delete"
                                    @click="fnShowDialog('dialogReason',scope.row.order_no)">拒绝</el-button>
                            </div>
                            <div
                                v-if="isPlatform"
                                style="display: flex"
                            >
                                <el-button
                                    :disabled="authResult.auth_hire && scope.row.status != 1"
                                    type="text"
                                    @click="fnAutoComplete(scope.row.order_no)">自动打款</el-button>
                                <el-button
                                    type="text"
                                    :disabled="authResult.auth_hire && scope.row.status !=1"
                                    @click="fnShowDialog('dialogOrderNo', scope.row.order_no)">完成</el-button>
                                <el-button
                                    :disabled="authResult.auth_hire && scope.row.status !=1"
                                    type="text"
                                    class="btn-delete"
                                    @click="fnShowDialog('dialogReason',scope.row.order_no)">拒绝</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div
                class="pagination-wrapper clearfix"
                v-if="!isPlatform"
            >
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    :current-page="page.now_page"
                    @current-change="getTableData" />
            </div>
            <div
                class="pagination-wrapper clearfix"
                v-if="isPlatform"
            >
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    :current-page="page.now_page"
                    @current-change="fnGetTabDataList" />
            </div>
        </div>
        <el-dialog
            title="请输入"
            :visible.sync="dialogOrderNoVisiable"
            width="420px"
            @close="fnClearFidlds('orderNoForm')">
            <div class="dialog-input">
                <div class="dialog-input-label">交易订单编号</div>
                <el-form
                    :model="orderNoForm"
                    :rules="{complete_remark: [{ required: true, message: '请输入交易单号', trigger: 'blur' }]}"
                    ref="orderNoForm"
                    label-width="0">
                    <el-form-item
                        prop="complete_remark">
                        <el-input
                            size="small"
                            v-model="orderNoForm.complete_remark"/>
                    </el-form-item>
                </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    size="small"
                    @click="dialogOrderNoVisiable = false; orderNoForm.complete_remark=''">取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="fnDoComplete()">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="请输入"
            :visible.sync="dialogReasonVisiable"
            width="420px"
            @close="fnClearFidlds('refuseForm')">
            <div class="dialog-input">
                <div class="dialog-input-label">取消原因</div>
                <el-form
                    :model="refuseForm"
                    :rules="{reason: [{ required: true, message: '请输入原因', trigger: 'blur' }]}"
                    ref="refuseForm"
                    label-width="0">
                    <el-form-item
                        prop="reason">
                        <el-input
                            size="small"
                            v-model="refuseForm.reason"/>
                    </el-form-item>
                </el-form>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    size="small"
                    @click="dialogReasonVisiable = false;refuseForm.reason='';">取消</el-button>
                <el-button
                    size="small"
                    type="primary"
                    @click="fnDoRefuse()">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isPlatform: false,
            authResult: {},
            statusList: [
                {
                    value: '0',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '进行中'
                },
                {
                    value: '2',
                    label: '终止'
                },
                {
                    value: '3',
                    label: '已完成'
                },
                {
                    value: '-1',
                    label: '未开始'
                }
            ],
            typeList: [{
                value: '0',
                label: '全部'
            },{
                value: '1',
                label: '用户提现'
            },{
                value: '2',
                label: '用户充值'
            },{
                value: '3',
                label: '系统赠送'
            },{
                value: '4',
                label: '系统扣除'
            },{
                value: '5',
                label: '学生分佣'
            },{
                value: '6',
                label: '邀请好友奖励'
            },{
                value: '101',
                label: '购物返利'
            },{
                value: '201',
                label: '任务奖励'
            },{
                value: '202',
                label: '远程任务奖励'
            },{
                value: '301',
                label: '班费分成'
            },{
                value: '401',
                label: '管培生分佣'
            },{
                value: '501',
                label: '会员卡邀请奖励'
            }],
            typeListPlatForm: [{
                value: '0',
                label: '全部'
            },{
                value: '1',
                label: '商品购买'
            },{
                value: '2',
                label: '提现'
            },{
                value: '3',
                label: '分佣'
            }],
            moneyTypeList: [{
                value: '0',
                label: '全部'
            }, {
                value: '1',
                label: '收入'
            }, {
                value: '2',
                label: '支出'
            }],
            tableData: [],
            filterData: {
                title: '',
                category: 0,
                type: '0',
                money_type: '0',
                status: '0',
                start_time: '',
                end_time:'',
                keyword_student_id: '',
                keyword_hire_id: '',
                hire_company_name: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            operateNo: '',
            dialogOrderNoVisiable: false,
            dialogReasonVisiable: false,
            orderNoForm: {
                complete_remark: ''
            },
            refuseForm: {
                reason: ''
            },
        };
    },
    computed: {
        exportLink() {
            let { title, type, money_type, status, start_time, end_time } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            start_time = start_time ? Date.parse(start_time)/1000 : '';
            end_time = start_time ? Date.parse(end_time)/1000 : '';

            return `${base}/task/finance_user_order%5Cexport_list?title=${title}&type=${type}&money_type=${money_type}&status=${status}&start_time=${start_time}&end_time=${end_time}&__ticket=${ticket}`;
        }
    },
    // watch: {
    //     $route() {
    //         this.init();
    //     }
    // },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.init();
        this.$nextTick(()=>{
            this.$refs.table.doLayout();
        });
    },
    methods: {
        /**
         * 用户
         */
        fnUser () {
            this.isPlatform = false;
            this.handleResetFilter();
            this.$nextTick(()=>{
                this.$refs.table.doLayout();
            });
        },

        /**
         * 企业主
         */
        fnOwners () {
            this.isPlatform = true;
            this.handleResetFilter();
            this.$nextTick(()=>{
                this.$refs.table.doLayout();
            });
        },

        /**
         * 获取企业主数据
         */
        fnGetTabDataList (page) {
            let { type, money_type, status, start_time, end_time, keyword_hire_id, hire_company_name } = this.filterData;

            start_time = start_time ? Date.parse(start_time)/1000 : '';
            end_time = end_time ? Date.parse(end_time)/1000 : '';

            this.$post('/student/finance_shop%5Cget_list', {
                page_id: page || this.page.now_page,
                type,
                money_type,
                status,
                start_time,
                end_time,
                keyword_hire_id,
                hire_company_name
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if(resp.data.page.total_page > 0 && resp.data.page.total_page < resp.data.page.now_page){
                        this.getTableData(resp.data.page.total_page);
                    }
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        center: true,
                        message: resp.msg
                    });
                }
            });
        },

        /** 确认拒绝 */
        fnDoRefuse(){
            this.$refs.refuseForm.validate(valid => {
                if(valid){
                    if (!this.isPlatform) {
                        let url = '/student/finance%5Cset_status';

                        this.fnSetListStatus(url,this.operateNo , 3, '', this.refuseForm.reason );
                    } else {
                        let url = '/student/finance_shop%5Cset_status';

                        this.fnSetListStatus(url,this.operateNo , 3, '', this.refuseForm.reason );

                    }
                    this.dialogReasonVisiable = false;
                }
            });
        },
        /** 确认完成 */
        fnDoComplete(){
            this.$refs.orderNoForm.validate(valid => {
                if(valid){
                    if (!this.isPlatform) {
                        let url = '/student/finance%5Cset_status';

                        this.fnSetListStatus(url, this.operateNo , 1, this.orderNoForm.complete_remark, '' );
                    } else {
                        let url = '/student/finance_shop%5Cset_status';

                        this.fnSetListStatus(url, this.operateNo , 1, this.orderNoForm.complete_remark, '' );

                    }
                    this.dialogOrderNoVisiable = false;
                }
            });
        },
        /** 自动打款 */
        fnAutoComplete(order_no){
            this.$confirm('此操作自动打款, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (!this.isPlatform) {
                    let url = '/student/finance%5Cset_status';

                    this.fnSetListStatus(url,order_no, 2, '', '');
                } else {
                    let url = '/student/finance_shop%5Cset_status';

                    this.fnSetListStatus(url,order_no, 2, '', '');
                }
            });
        },
        // 设置订单状态
        fnSetListStatus(url,order_no, type, complete_remark, refuse_reason) {
            this.$post(url, {
                order_no,
                type,
                complete_remark,
                refuse_reason
            }, resp => {
                if(resp.code == 1){
                    this.getTableData();
                    this.isPlatform = false;
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '操作成功'
                    });
                }else{
                    this.$message({
                        type: 'warning',
                        center: true,
                        message: resp.msg
                    });
                }
            });
        },
        /**
         * 初始化
         */
        init() {
            let { title, type, money_type, status, start_time, end_time, now_page, keyword_student_id } = this.$route.query;


            this.filterData.title = title || '';
            this.filterData.type = type || '0';
            this.filterData.money_type = money_type || '0';
            this.filterData.status = status || '0';
            this.filterData.start_time = start_time ? new Date(start_time) : '';
            this.filterData.end_time = end_time ? new Date(end_time) : '';
            this.filterData.keyword_student_id = keyword_student_id || '';
            this.page.now_page = eval(now_page) || 1;

            this.$store.commit('SET_HEADER', [
                {
                    title: 'APP后台'
                },{
                    title: '财务管理'
                }
            ]);

            if(this.$route.query.form_type == 2) {
                // this.fnOwners();
                this.isPlatform = true;
            } else if (this.$route.query.form_type == 1) {
                // this.fnUser();
                this.isPlatform = false;
            }

            // http://localhost:8080/student/finance-list?title=&type=0&money_type=0&keyword_student_id=&status=0&start_time=&end_time=&now_page=1&form_type=2&keyword_hire_id=hi_9a1ceb5c508a0
            if(this.$route.query.keyword_hire_id) {
                this.filterData.keyword_hire_id = this.$route.query.keyword_hire_id;
                this.fnGetTabDataList();
                return;
            }

            this.getTableData();
        },

        /**
         * 获取表格数据
         */
        getTableData(page) {
            let { title, type, money_type, status, start_time, end_time, category, keyword_student_id } = this.filterData;

            start_time = start_time ? Date.parse(start_time)/1000 : '';
            end_time = end_time ? Date.parse(end_time)/1000 : '';

            this.$router.replace({
                name: this.$route.name,
                query: {
                    title,
                    category,
                    type,
                    money_type,
                    keyword_student_id,
                    status: eval(status),
                    start_time,
                    end_time,
                    now_page: page || this.page.now_page,
                }
            });

            this.$post('/student/finance%5Cget_list', {
                page_id: page || this.page.now_page,
                title,
                type,
                money_type,
                status,
                start_time,
                end_time,
                keyword_student_id,
                category
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if(resp.data.page.total_page > 0 && resp.data.page.total_page < resp.data.page.now_page){
                        this.getTableData(resp.data.page.total_page);
                    }
                }
            });

        },

        /**
         * 清空筛选数据
         */
        handleResetFilter() {
            this.filterData = {
                title: '',
                type: '0',
                money_type: '0',
                status: '0',
                start_time: '',
                end_time:'',
                keyword_student_id: '',
                keyword_hire_id: '',
                hire_company_name: ''
            };
            if (!this.isPlatform) {
                this.tableData = [];
                this.getTableData(1);
            } else {
                this.tableData = [];
                this.fnGetTabDataList(1);
            }
        },

        /**
         * 导出搜索记录
         */
        handleSearchResult () {
            let { title, type, money_type, status, start_time, end_time, keyword_hire_id, hire_company_name } = this.filterData;
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${base}/student/finance_shop%5Cexport_list?type=${type}&money_type=${money_type}&status=${status}&start_time=${start_time}&end_time=${end_time}&keyword_hire_id=${keyword_hire_id}&hire_company_name=${hire_company_name}&__ticket=${ticket}`;

            window.open(url);
        },

        fnShowDialog(type, order_no){
            this.operateNo = order_no;
            this[type+'Visiable'] = true;
        },
        fnClearFidlds(name){
            this.$refs[name].resetFields();
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        typeFormatter(row, column, val){
            if (!val) {
                return '--';
            }else if(val == 0){
                return '不限';
            }else if(val == 1){
                return '提现';
            }else if(val == 2){
                return '充值';
            }else if(val == 3){
                return '系统赠送';
            }else if(val == 4){
                return '系统扣除';
            }else if(val == 101){
                return '购物返利';
            }else if(val == 201){
                return '任务奖励';
            }else{
                return '--';
            }
        },
        moneyTypeFormatter(row, column, val){
            if (!val) {
                return '--';
            }else if(val == 1){
                return '收入';
            }else if(val == 2){
                return '支出';
            }else{
                return '--';
            }
        }

    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    // flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px 15px 0;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.search-btn-wrapper {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.table-wrapper {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    .submit-config-item {
        display: inline-block;
        position: relative;
        padding-right: 10px;
        font-size: 14px;

        & + .submit-config-item {
            padding-left: 10px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: 1px;
                height: 14px;
                transform: translate(0, -50%);
                background-color: #d8d8d8;
            }
        }

        .num {
            vertical-align: middle;
        }
        .iconfont {
            font-size: 16px;
            color: #b9b9b9;
            vertical-align: middle;
        }

        .icon-tupian {
            font-size: 20px;
        }
    }
    .task-review-status {
        .status {
            position: relative;
            display: inline-block;
            padding-left: 9px;
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(0, -50%);
                width: 3px;
                height: 3px;
                border-radius: 50%;
            }
            &.wait-submit,
            &.wait-audit {
                &::before {
                    background-color: #F5A623;
                }
            }
            &.deny {
                &::before {
                    background-color: #FF0019;
                }
            }
            &.completed {
                &::before {
                    background-color: #00C800;
                }
            }
        }
    }
    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
.el-form {
    .el-progress {
        display: inline-block;
        width: 150px;
        margin-right: 15px;
        vertical-align: middle;
    }
    .progress-hint {
        color: #8c8c8c;
    }
}
.form-operation-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 56px;

    .index-btn {
        color: #000;
        cursor: pointer;
        & + .index-btn {
            margin-left: 15px;
        }
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.dialog-input-label{
    margin-bottom: 10px;
}
</style>
<style lang="less">
.finance-list-container .el-table--border th.gutter:last-of-type{
    display: table-cell !important;
    width:50px !important;
}
.finance-list-container {
    .filter-input{
        width:100%!important;
    }
    .small-form {
        font-size: 0;
    }
    .el-dialog__body{
        padding-bottom: 0;
        padding-top: 10px;
    }
    .small-form-item {
        display: inline-block;
        width: 47%;
        font-size: 14px;
        margin-right: 10%;
        &:nth-child(even) {
            margin-left: 6%;
        }
        .el-form-item__label {
            padding-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .finance-list-container tbody {
        .cell {
            display: flex;
            align-items: center;
            height: auto !important ;
        }
    }
}
.content-wrapper .el-table__body-wrapper {
    flex: 1 !important;
}
.container.el-table th.gutter{
    display: table-cell !important;
}
</style>
